<template>
    <div>
        <div class="right">
            <Row style="margin-bottom: 32px">
                <Col span="24">
                    <Card>
                        <p slot="title">Excel转JSON</p>
                        <Form ref="excel2Json">
                            <FormItem label="上传Excel">
                                <vue-xlsx-table
                                    @on-select-file="handleExcelImport"
                                    title="导入Excel"
                                >
                                    <Icon type="ios-folder-open" />
                                </vue-xlsx-table>
                            </FormItem>
                            <FormItem>
                                <Button type="primary" @click="downloadJSON">
                                    下载JSON
                                </Button>
                            </FormItem>
                        </Form>
                    </Card>
                </Col>
            </Row>

            <Row>
                <Col span="24">
                    <Card>
                        <p slot="title">JSON转Excel</p>
                        <Form ref="json2Excel">
                            <FormItem label="JSON内容">
                                <Input
                                    type="textarea"
                                    v-model="jsonContent"
                                    placeholder="请粘贴JSON内容"
                                ></Input>
                            </FormItem>
                            <FormItem>
                                <Button type="primary" @click="downloadExcel">
                                    下载Excel文件
                                </Button>
                            </FormItem>
                        </Form>
                    </Card>
                </Col>
            </Row>
        </div>
        <k-datatable
            v-if="showDataTable"
            :table-data="excelData"
            :current-row-index="0"
        ></k-datatable>
    </div>
</template>

<script>
    import jsonDownloader from "@/libs/exportJSON";

    export default {
        name: "",
        data() {
            return {
                showDataTable: false,
                excelData: [],
                jsonContent: null,
                excelExporter: null,
            };
        },
        created() {},
        components: {
            "k-datatable": () => import("@/components/DataTable"),
        },
        methods: {
            downloadJSON() {
                jsonDownloader(this.excelData, "data.json");
            },
            downloadExcel() {
                const ExportJsonExcel = require("js-export-excel");
                let jsonObj = JSON.parse(this.jsonContent);
                if (!jsonObj instanceof Array) {
                    alert("JSON内容的根节点必须是一个数组（Array）类型");
                } else {
                }
                let option = {};
                option.fileName = "excel";
                option.datas = [
                    {
                        //第一个sheet
                        sheetData: jsonObj,
                        sheetName: "sheet",
                        sheetFilter: ["two", "one"],
                        sheetHeader: Object.keys(jsonObj[0]),
                    },
                ];
                var toExcel = new ExportJsonExcel(option);
                toExcel.saveExcel();
            },
            handleExcelImport(data) {
                this.showDataTable = true;
                this.excelData = data.body;
                this.currentExcelIndex = 0;
                store.useExcel = true;
                store.excelLength = this.excelData.length;
            },
        },
    };
</script>

<style lang="" scoped>
</style>